<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .alert {
            display: none;
            padding: 20px;
            background-color: #ff0000;
            color: white;
            margin-bottom: 15px;
            cursor: pointer;
            border: none;
            outline: none;
            font-size: 26px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            margin: 4px 2px;
            transition: background-color 0.3s;
            border-radius: 12px;
        }
        .alert:hover{
            background-color: rgb(18, 10, 249);
            transform: scale(0.9);
        }

        .check {
            position: relative;
            top: -9999px;
            left: -9999px; 
        }

        #alertToggle:checked+.alert {
            display: block;
        }

        #alertToggle:focus+.alert {
            display: none;
        }

        .container {
            width: 100%;
            height: 100vh;
            background: -webkit-linear-gradient(0deg,
                    rgb(59, 124, 255)0%,
                    rgb(2, 228, 172)50%,
                    rgb(6, 174, 3)100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
    </style>
</head>

<body>

    <div class="container">
        <input type="checkbox" class="check" id="alertToggle">
        <label for="alertToggle" class="alert" tabindex="0">This is an alert message. Click to hide.</label>
    </div>

</body>

</html>